<template>
  <div class="dataDictionary">
    <!--数据字典---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>系统管理</a-breadcrumb-item>
      <a-breadcrumb-item>数据字典</a-breadcrumb-item>
    </a-breadcrumb>
    <!--分割线-->
    <a-divider/>
    <!--数据字典---------新增表单-->
    <div class="btn">
      <div class="left">
        <a-button type="danger" @click="showModal">添加字典</a-button>
      </div>
      <div class="right">
        <a-input-search placeholder="字典类型" style="width: 200px" @search="onSearch"/>
      </div>
      <a-modal v-model="visible" title="新增字典" :maskClosable="false" :closable="false">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="onSubmit">提交</a-button>
        </template>
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm">
          <a-form-model-item label="字典类型：" prop="dType">
            <a-input v-model="form.dType" @blur="getPinYin"/>
          </a-form-model-item>
          <a-form-model-item label="字典编码：" prop="dCode">
            <a-input v-model="form.dCode"/>
          </a-form-model-item>
          <a-form-model-item label="字典描述：" prop="describe">
            <a-input v-model="form.describe"/>
          </a-form-model-item>
          <a-form-model-item label="字典值：" prop="dValues">
            <a-input v-model="form.dValues"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <!--数据字典---------字典列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="action" slot-scope="text" @click="deleteDic(text)"><a>删除</a></span>
    </a-table>
    <!--数据字典---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import pinyin from 'js-pinyin'
import qs from 'qs'
import {addDictionary, delDictionary, getDictionary} from '../http/api'

const columns = [
  {
    title: '字典类型',
    dataIndex: 'dType',
    align: 'center',
    width: 150
  }, {
    title: '字典编码',
    dataIndex: 'dCode',
    align: 'center',
    width: 150
  }, {
    title: '字典描述',
    dataIndex: 'dDescribe',
    align: 'center',
    width: 150
  }, {
    title: '字典值',
    dataIndex: 'dValues',
    align: 'center',
    width: 150
  }, {
    title: '操作',
    scopedSlots: {customRender: 'action'},
    align: 'center',
    width: 80
  }
]
const data = []

export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data,
      // formModel 表单布局数据
      labelCol: {span: 5},
      wrapperCol: {span: 16},
      // formModel 表单默认数据
      form: {
        dType: '',
        dCode: '',
        describe: '',
        dValues: ''
      },
      // formModel 表单验证规则
      rules: {
        dType: [
          {required: true, message: '请输入字典类型', trigger: 'blur'}
        ],
        dCode: [
          {required: true, message: '请输入字典编码', trigger: 'blur'}
        ],
        describe: [
          {required: true, message: '请输入字典描述', trigger: 'blur'}
        ],
        dValues: [
          {required: true, message: '请输入字典值', trigger: 'blur'}
        ]
      },
      // formModel 表单开关判断
      visible: false,
      // 搜索框文本
      searchValue: '',
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 5
    }
  },
  methods: {
    // 获取数据字典数据的接口
    async getDictionaryList() {
      await getDictionary({
        searchValue: this.searchValue,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 打开新增表单函数
    showModal() {
      this.visible = true
      this.loadFlag = true
      this.$refs.ruleForm.resetFields()
    },
    // 表单取消按钮
    handleCancel(e) {
      this.visible = false
      this.loadFlag = false
    },
    // 搜索框函数
    onSearch(value) {
      this.searchValue = value
      this.$message.success('查询成功')
      this.getDictionaryList()
    },
    // 表单提交按钮
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addDictionary(qs.stringify(this.form))
            .then(res => {
              this.$message.success(res.msg)
              this.loadFlag = false
              this.reload()
            })
        }
      })
    },
    // 根据字典类型在失去焦点时自动填补字典编码
    getPinYin() {
      this.form.dCode = pinyin.getFullChars(this.form.dType)
    },
    deleteDic(val) {
      let d = {
        dicId: val.dicId
      }
      delDictionary(qs.stringify(d)).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.$message.success(res.msg)
          this.reload()
        }
      })
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getDictionaryList()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getDictionaryList()
    }
  },
  created() {
    this.loadFlag = true
    this.getDictionaryList()
  }
}
</script>
<style lang="less" scoped>
.left {
  text-align: left;
  margin-left: 20px;
  margin-bottom: 15px;
  float: left;
}

.right {
  text-align: right;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}
</style>
